<template>
	<!-- This template is used to solve the problem that the native video always floats on the top layer. Use the view to replace the video, and then replace it when playing. Listen to an event to replace the video when it is covered. -->
  <!--Add video tag support, and add it cyclically-->
  <view @click="play">
	  <view v-if="!playState" :class="node.classStr" :style="node.styleStr" style="display: inline-block;margin: auto;max-width: 100%;" class="video-video">
		  <view style="display: flex;width: 100%;height:100%;flex-direction: row; justify-content: center;align-items: center;">
			  <image src="https://gwbj.tongwenkeji.com/html/static/play.png" style="width: 20%;" mode="widthFix"></image>
		  </view>
	  </view>
	  <video
	  :autoplay="false" 
	  :class="node.classStr" 
	  :style="node.styleStr" 
	  class="video-video"
	  v-if="playState"
	  :src="node.attr.src"></video>
	  
  </view>
  
</template>

<script>
export default {
  name: 'wxParseVideo',
  props: {
    node: {},
  },
  data(){
	  return{
		  playState:true,
		  videoStyle:'width: 100%;'
	  }
  },
  methods:{
	  play(){
		  console.log('click video to play')
		  //Show the player and play the player
		  this.playState = !this.playState
	  }
  },
  mounted() {
	  //Capture the covering behavior of the side-sliding menu, hide the video
  	uni.$on('slideMenuShow',e=>{
		console.log('capture event：'+e)
		if(e == 'show' && this.playState){
			//Stop while playing
			this.playState = false
		}
	})
  }
};
</script>
<style>
	.video-video{background: #000000;}
</style>
